<template>
  <div id="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
  data() {
    return {};
  },
  mounted() {
    this.queryEcharts();
  },
  methods: {
    queryEcharts() {
      var chartDom = document.getElementById("echarts");
      var myChart = echarts.init(chartDom, "dark");
      var symbolSize = 2.5;
      myChart.clear();
      myChart.setOption({
        tooltip: {},
        backgroundColor: "#fff",
        visualMap: [
          {
            show: false,
            dimension: 0, //按照x轴渐变
            min: 0, //TODO需要根据数据动态调整
            max: 1800, //TODO需要根据数据动态调整
            // let mapMax = Math.max(...data.map(item => item[2]));
            // let mapMin = Math.min(...data.map(item => item[2]));
            seriesIndex: 0,
            target: {
              inRange: {
                color: [
                  "rgba(168,172,249,0.6)",
                  "rgba(130,103,191,0.6)",
                  "rgba(160,82,164,0.8)",
                  "rgba(190,247,212,0.6)",
                  "rgba(215,237,192,0.6)",
                  "rgba(246,143,137,0.6)",
                ],
                // color: ['red','green']
              },
            },
          },
          {
            show: false,
            seriesIndex: 1,
            target: {
              inRange: {
                symbolSize: [10, 20],
                color: "red",
              },
            },
          },
        ],
        xAxis3D: {
          type: "value",
          name: "x",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgb(248,248,248)", "rgb(248,248,248)"],
            },
          },
        },
        yAxis3D: {
          type: "value",
          name: "y",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgb(248,248,248)", "rgb(248,248,248)"],
            },
          },
        },
        zAxis3D: {
          type: "value",
          name: "z",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgb(248,248,248)", "rgb(248,248,248)"],
            },
          },
        },
        grid3D: {
          // environment: 'rgb(248,248,248)',
          viewControl: {
            // projection: 'orthographic'
            // beta: -45
          },
        },
        series: [
          {
            type: "surface",
            name: "test",
            wireframe: {
              show: false,
            },
            zlevel: -10,
            data: [
              [0, 20, 0.006],
              [1000, 20, 0.009],
              [1200, 20, 0.0095],
              [1500, 20, 0.01],
              // [0,40,0.016],[1000,40,0.022],[1200,40,0.024],[1500,40,0.025],
              [0, 60, 0.006],
              [1000, 60, 0.012],
              [1200, 60, 0.014],
              [1500, 60, 0.015],
              [0, 80, 0.008],
              [1000, 80, 0.015],
              [1200, 80, 0.017],
              [1500, 80, 0.02],
              [0, 100, 0.015],
              [1000, 100, 0.022],
              [1200, 100, 0.026],
              [1500, 100, 0.032],
            ],
            //这里的点坐标是随便写的，但是需要一定的规律，否则可能渲染不出来。
            //比如博主这里写的是：
            //第一行固定y=20，x和z改变；
            //第二行固定y=40，同时x按照第一排x的规律写，z自由改变，以此类推...（仅个人猜测）
          },
          {
            type: "scatter3D",
            // symbol: 'circle',
            symbol:
              "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z",
            zlevel: 10,
            itemStyle: {
              color: "black",
            },
            data: [
              [600, 28, 0.007],
              [1109, 27, 0.007],
              [1763, 88, 0.064],
            ],
          },
        ],
      });
      myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
#echarts {
  width: 800px;
  height: 800px;
}
</style>
